<template>
  <div class="div">
    <PageTitle title="普通用户列表"></PageTitle>
    <el-table
      stripe
      :data="tableData"
    >
      <el-table-column
        prop="openid"
        label="openid">
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="微信昵称">
      </el-table-column>
      <el-table-column
        label="微信头像"
      >
        <template slot-scope="scope">
          <img :src="scope.row.headimgurl" @click="handlePictureCardPreview(scope.row.headimgurl)" class="list-img">
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="orderCount"
        label="订单数量">
      </el-table-column> -->
      <!-- <el-table-column
        prop="orderCount"
        label="退单数量">
      </el-table-column> -->
      <!-- <el-table-column
        prop="orderPrice"
        label="订单金额(元)">
      </el-table-column> -->
      <el-table-column
        prop="province"
        label="城市">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间">
      </el-table-column>
      <!-- <el-table-column
        label="操作"
        width="140">
      <template slot-scope="scope">
        <router-link
          :to="'/merchantList/merchantDetail/' + scope.row.id"
          class="color-theme margin-right"
          @click.native="goToDetail"
        >查看</router-link>
      </template>
      </el-table-column> -->
    </el-table>
    <div class='pagination-wrapper'>
      <el-pagination
          layout="prev, pager, next"
          @current-change="pageChange"
          :page-size="pageSize"
          :total="totalCount"
          :current-page="pageNum"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import ListSearchBar from '@/components/listSearchBar/ListSearchBar.vue'
  import _ from 'lodash'
  export default {
    name: 'merchantList',
    components: {
      PageTitle,
      ListSearchBar
    },
    activated() {
      this._getList()
    },
    data() {
      return {
        tableData: [],
        pageNum: 1,
        totalCount: 0,
        pageSize: 10,
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods: {
      async _getList() {
        let { data: { data, code, msg }} = await this.$axios({
          url: this.$api + '/v1/meter/member',
          method: 'GET',
          params: {
            size: this.pageSize,
            current: this.pageNum
          }
        })
        if(code == 0) {
          if(data.items) {
            this.tableData = data.items
            this.totalCount = data.page.totalCount
          }
        } else {
          this.tableData = []
        }
      },
      pageChange(pageNum) {
        this.pageNum = pageNum
        this._getList()
      },
      handlePictureCardPreview(src) {
        this.dialogImageUrl = src;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list-img {
     width:50px;
     height:50px;
     cursor: pointer;
  }
  .el-button--text {
    text-decoration: none;
  }
</style>
